<template>
    <!-- <div class="other-top-head head-fixed" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
        <div class="navbar-wrap">
            <div class="new-nav-page scroll-white" style="width: 100%">
                <headerCon></headerCon>
            </div>
        </div>
    </div> -->
    <div class="subscribe-base">
        <div class="subscribe-header" style="background: url('https://grocery-cdn.huaban.com/file/85868b60-f0b8-11ee-97bf-8784330ff257.jpg')">
            <div class="__8d_Ftpyz">
                <div class="QSeUvD5b">
                    <div class="__5lbPL2fx">
                        <div class="PCV2xUpe">
                            <div class="TnEmXxsJ">
                                <div class="xXf5xsa5">库漫空间</div>
                                <div class="waxjTK_y xXf5xsa5">企业授权定制</div>
                            </div>
                            <div class="__7iNBg0X3">
                                <div class="ofg273DE"><img
                                        src="https://grocery-cdn.huaban.com/file/a0436e60-efef-11ee-9c0b-c38e922e51f3.png"
                                        alt="">
                                    <div class="KTA4S7MT">大量高清图片供给</div>
                                </div>
                                <div class="ofg273DE"><img
                                        src="https://grocery-cdn.huaban.com/file/a0436e60-efef-11ee-9c0b-c38e922e51f3.png"
                                        alt="">
                                    <div class="KTA4S7MT">正版商业授权</div>
                                </div>
                                <div class="ofg273DE"><img
                                        src="https://grocery-cdn.huaban.com/file/a0436e60-efef-11ee-9c0b-c38e922e51f3.png"
                                        alt="">
                                    <div class="KTA4S7MT">多场景覆盖</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="__9PROi_ui">
                    <div class="T0YeNES7"
                        style="background-image: url('https://grocery-cdn.huaban.com/file/ee27dd80-ece5-11ee-9dbc-cb1104559951.png')">
                        <div class="DlirJ1ib">
                            <div class="__5tHOmji1" v-for="(item, index) in subscribeListData" :key="index">
                                <div>
                                    <div class="X20EtzrE">{{ item.title || '' }}</div>
                                    <div class="Ml_1CMnv">{{ item.subtitle || '' }}</div>
                                    <div class="d1xY_zWD">
                                        <div class="dOLnFV6B" v-for="(content, c_index) in item.subscribe_json_content"
                                            :key="c_index"><img
                                                src="https://grocery-cdn.huaban.com/file/769aa030-f0a1-11ee-97bf-8784330ff257.png"
                                                alt="" width="20">{{ content.value }}</div>

                                    </div>
                                </div>
                                <div class="P3IJ_Ps1" @click="immediatelyCustomize">
                                    <span>{{ item.type == 0 ? '立即定制' : '立即订阅' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                  
                </div>
       
            </div>
        </div>
    </div>

    <div>
        <el-dialog v-model="dialogVisible" :close-on-press-escape="false" width="889" :close-on-click-modal="false"
            append-to-body align-center modal-class="overlay-modal" style="border-radius: 16px !important;">
            <div class="rgkLEA2W">
                <div class="XTjN43Yt">
                    <div class="e46WNgqp">
                        <div class="Kry8SuEM">添加微信，立即线上沟通</div>
                        <div class="n6yPVLbf"><img
                                src="https://img.kmanstage.com/32641506-f043-4e8c-8daa-481320ce4b45?e=1729482534&token=LGyASzu7qFhBuMaTrkmtFNokyDFQPRz7fQPBiGox:Ag23tHQT3E2vuPZhCCfxIYUgUuo="
                                alt="二维码"></div>
                        <div class="D1plM_Ix">无需加好友，聊完即删<br>(我们看不到您的朋友圈等个人信息)</div>
                        <div class="BUB79uwl" data-gd-click="button_click" data-button-name="售后咨询"><span role="img"
                                class="anticon QaBLSkFR"><svg width="1em" height="1em" fill="currentColor"
                                    aria-hidden="true" focusable="false" class="">
                                    <use xlink:href="#ic_severice"></use>
                                </svg></span>我已购买, 咨询售后</div>
                    </div>
                </div>
                <div class="XTjN43Yt">
                    <div class="XkQsGOQO">
                        <div class="Kry8SuEM">预留信息,我们将在1～2个工作日联系您</div>
                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" style="max-width: 600px"
                            label-width="auto" class="lMY5rscV" label-position="top">
                            <el-form-item label="公司名称" prop="company">
                                <el-input v-model="ruleForm.company" />
                            </el-form-item>
                            <el-form-item label="预计每年的下载量" prop="resource">
                                <el-radio-group v-model="ruleForm.resource">
                                    <el-radio value="100以下" size="large" border>100以下</el-radio>
                                    <el-radio value="100～500个" size="large" border>100～500个</el-radio>
                                    <el-radio value="500～3000个" size="large" border>500～3000个</el-radio>
                                    <el-radio value="3000个以上" size="large" border>3000个以上</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="联系人" prop="name">
                                <el-input v-model="ruleForm.name" />
                            </el-form-item>
                            <el-form-item label="联系人电话" prop="mobile">
                                <el-input v-model="ruleForm.mobile" />
                            </el-form-item>
                            <el-form-item>
                                <div class="M7LdnvD7">
                                    <el-button class="Bi65U_Zw" type="primary" @click="submitForm(ruleFormRef)">
                                        确认提交
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { FormInstance, FormRules, ElMessage, ElLoading } from 'element-plus'
import footerContent from "../../components/footerContent.vue";
import { askedQuestion, saveCustomer, subscribeList } from "../../api/product";
import { useSiteConfig } from '../../stores/siteConfig'
const siteConf = useSiteConfig()
const dialogVisible = ref(false)

// 自定义验证规则
const validatePhoneNumber = (rule: any, value: any, callback: any) => {
    const phoneRegex = /^(1[3-9]\d{9})$|^(0\d{2,3}-?\d{7,8})$/;
    if (value === '') {
        callback(new Error('请输入手机号或固定电话号码'));
    } else if (!phoneRegex.test(value)) {
        callback(new Error('请输入正确的手机号或固定电话号码，例如：13x12345678或05xx-82xxxxxx'));
    } else {
        callback();
    }
};
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    company: string,
    name: string,
    mobile: string,
    resource: string
}
const ruleForm = reactive<RuleForm>({
    company: '',
    name: '',
    mobile: '',
    resource: ''
})

const rules = reactive<FormRules<RuleForm>>({
    company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
    ],
    mobile: [
        { required: true, validator: validatePhoneNumber, trigger: 'blur' }
    ],
    resource: [
        {
            required: true,
            message: '请选择预计每年下载量',
            trigger: 'change',
        },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const loading = ElLoading.service({
                lock: true,
                text: '请稍等,正在提交...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            saveCustomer(ruleForm).then((res: any) => {
                if (res.code == 1) {
                    ElMessage.success(res.msg);
                    dialogVisible.value = false
                }
            }).catch((err: any) => {
                console.log(err)
            }).finally(() => {
                loading.close()
            })
        } else {
            ElMessage.error("请完善申请资料");
        }
    })
}


//数据源读取
const subscribeListData = ref<any>([]);
const subscribeListInfo = () => {
    subscribeList({}).then((res: any) => {
        if (res.code == 1) {
            subscribeListData.value = res.data.list
        }
    }).catch((err: any) => {
        console.log(err)
    })
}




document.body.classList.remove('no-scroll');
//获取常见问题
const askedQuestionData = ref<any>([]);
askedQuestion({ q_type: 0 }).then((res: any) => {
    if (res.code == 1) {
        askedQuestionData.value = res.data
    }
}).catch((err) => {
    console.log(err)
})
//立即定制
const immediatelyCustomize = () => {
    dialogVisible.value = true
}



onMounted(() => {
    subscribeListInfo()
})

</script>
<style>
body {
    background: #1a1a1a !important;
}

.el-radio.is-bordered.is-checked {
    border-color: #e85623 !important;
}

.el-radio__input.is-checked+.el-radio__label {
    color: #e85623 !important;
}

.el-radio__input.is-checked .el-radio__inner {
    background: #e85623 !important;
    border-color: #e85623 !important;
}

.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #ee7447 !important;
}

.el-collapse {
    --el-collapse-border-color: transparent !important;
}

.subscribe-base {
    min-width: 1406px;

}

.subscribe-header {
    box-sizing: border-box;
    padding-top: 0px;

}

.__8d_Ftpyz {
    position: relative;
    min-width: 976px;
    background-repeat: no-repeat;
    background-position: top;
    box-sizing: border-box;
}

.subscribe-header .qxpSUG96 {
    min-width: 2560px;
    /* position: absolute; */
    width: 100%;

    transform: translateX(-50%);
    pointer-events: none;
}

img {
    vertical-align: middle;
    border-style: none;
}

.__8d_Ftpyz .QSeUvD5b {
    width: 1296px;
    margin: 0 auto;
}

/* .__5lbPL2fx .PCV2xUpe {
    margin-top: 96px;
} */

.__5lbPL2fx .PCV2xUpe .TnEmXxsJ {
    display: flex;
}

.__5lbPL2fx .PCV2xUpe .xXf5xsa5 {
    font-size: 56px;
    font-weight: 200;
    line-height: 128%;
    margin-top: 96px;
}

.__5lbPL2fx .PCV2xUpe .waxjTK_y {
    color: #eca671;
    font-weight: 600;
    margin-bottom: 24px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 {
    padding-bottom: 96px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .ofg273DE {
    color: #1c1f23;
    display: inline-flex;
    margin-right: 21px;
    align-items: center;
    margin-bottom: 13px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .ofg273DE img {
    width: 20px;
    height: 20px;
    margin-right: 1px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .KTA4S7MT {
    display: flex;
    align-items: center;
}

.jCq5t8Ag {
    font-size: 18px;
}

.fXnpvOe5 {
    color: #eca671;
}

/* .__9PROi_ui {
    background: linear-gradient(180deg, #f9f0ea 73.94%, #fff 80%);
} */

.T0YeNES7 {
    border-radius: 24px;
    margin: 75px auto 0;
    width: 1288px;
    background-size: cover;
    background-color: #2e2e2e;
    height: 372px; 
}

.T0YeNES7 .DlirJ1ib {
    /* position: absolute;
    width: 100%;
    top: 108px;
    display: flex;
    padding: 0 32px;
    box-sizing: border-box; */
    position: absolute;
    width: 100%;
    top: 108px;
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
    padding: 0 12px;
    box-sizing: content-box;

}

.T0YeNES7 .DlirJ1ib .__5tHOmji1:not(:last-child) {
    margin-right: 15px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 {
    width: calc(19%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    box-shadow: 0 0 1px 0 rgba(28, 31, 35, .16), 0 6px 32px 4px rgba(28, 31, 35, .08);
    background: #fffbf7;
    position: relative;
    transition: transform .2s ease-in-out;
    margin-bottom: 15px;
    /* 可选：在子元素之间添加垂直间距 */
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .X20EtzrE {
    color: #1c1f23;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .Ml_1CMnv {
    font-size: 12px;
    color: rgba(50, 42, 42, .65);
    padding-bottom: 20px;
    border-bottom: 1px solid hsla(29, 16%, 72%, .45);
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD {
    margin-top: 24px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD .dOLnFV6B {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #73675d;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD .dOLnFV6B img {
    margin-right: 3px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .P3IJ_Ps1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffead8;
    background: linear-gradient(90deg, #4d4542, #1c1716);
    cursor: pointer;
    height: 42px;
    border-radius: 12px;
    margin-top: 50px;
    position: relative;
}

.eKPpmK85 {
    width: 1296px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    color: #fff;

}

.fLE_iyzU header {
    color: #fff;
    font-size: 24px;
    margin-top: 80px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;

}

.dQZ1bQM4 {
    font-size: 40px;
    font-weight: 500;

}

.eKPpmK85_content {
    color: #1a1a1a;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    border-radius: 24px;
    background: #fff;
    padding: 20px;
}

.el-dialog__header {
    padding-bottom: 0px !important;
}

.el-dialog__headerbtn {
    z-index: 100000 !important;
    font-size: 25px !important;
}




.rgkLEA2W {

    min-height: 434px;
    display: flex;
    /* background-color: #fff;
    box-shadow: 0 6px 32px 4px rgba(28, 31, 35, .08), 0 0 1px 0 rgba(28, 31, 35, .16); */
}

.rgkLEA2W .e46WNgqp {
    text-align: center;
    border-right: 1px solid rgba(30, 32, 35, .1);
    padding: 0px 24px 0px 0;
    background: #fff;
    height: 100%;
    width: 209px;
    display: flex;
    flex-direction: column;
}

.rgkLEA2W .Kry8SuEM {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 600;
    text-wrap: nowrap;
}

.rgkLEA2W .e46WNgqp .n6yPVLbf {
    margin: 77px auto 0;
    width: 160px;
    height: 160px;
}

.rgkLEA2W .e46WNgqp .n6yPVLbf img {
    width: 100%;
}

.rgkLEA2W .e46WNgqp .D1plM_Ix {
    margin-top: 12px;
    color: rgba(30, 32, 35, .65);
    font-size: 12px;
    white-space: nowrap;
}

.rgkLEA2W .BUB79uwl {
    cursor: pointer;
    margin-top: auto;
    text-align: center;
}

.rgkLEA2W .BUB79uwl .QaBLSkFR {
    padding-right: 12px;
    font-size: 17px;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rgkLEA2W .XTjN43Yt:nth-child(2) {
    width: 100%;
}

.rgkLEA2W .XkQsGOQO {
    width: 100%;
    padding: 0px 0 24px 24px;
    text-align: center;
}

.rgkLEA2W .Kry8SuEM {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 600;
    text-wrap: nowrap;
}

.rgkLEA2W .XkQsGOQO .lMY5rscV {
    margin-top: 16px;
}

.M7LdnvD7 {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.Bi65U_Zw {
    width: 100%;
    height: 42px;
    background: linear-gradient(90deg, #4d4542, #1c1716);
    border: none;
    color: #ffead8;
    border-radius: 12px;
}
</style>